<template>
    <div class="app-container">
         <el-tabs v-model="activeName" @tab-click="handleClickTab">
            <el-tab-pane label="流程分类(LF)" name="LFTab">
                <div class="query-box">
                    <el-form :model="taskMgmtVO" ref="queryRef" :inline="true" v-show="showSearch">
                        <el-form-item label="关键字" prop="description">
                            <el-input v-model="taskMgmtVO.description" placeholder="请输入关键字" clearable
                                style="width: 200px" @keyup.enter="handleQuery" />
                        </el-form-item>

                        <el-form-item>
                            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
                            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
                            <el-button type="success" plain icon="CirclePlus" @click="createLFTemp">新增(LF)</el-button>
                        </el-form-item>
                        <el-form-item style="float: right;">
                            <right-toolbar :showSearch="showSearch" @queryTable="getLFPageList"
                                :columns="columns"></right-toolbar>
                        </el-form-item>
                    </el-form>
                </div>
                <div class="table-box">
                    <el-table v-loading="loading" :data="LFPageList" height="50vh">
                        <el-table-column label="类型标识" align="center" prop="key" v-if="columns[0].visible"
                            :show-overflow-tooltip="true">
                            <template slot-scope="scope">
                                <el-tooltip class="box-item" effect="dark" placement="right">
                                    <template #content>
                                        <span>{{ scope.row.key }}</span>
                                    </template>
                                    {{ substringHidden(scope.row.key) }}
                                </el-tooltip>
                            </template>
                        </el-table-column>
                        <el-table-column label="类型名称" align="center" prop="value" v-if="columns[1].visible"
                            :show-overflow-tooltip="true" />
                        <el-table-column label="流程分类" align="center" prop="type" v-if="columns[2].visible"
                            :show-overflow-tooltip="true">
                            <template slot-scope="scope">
                                <el-tag v-if="item.row.type === 'LF'" type="success">{{ scope.row.type }}</el-tag>
                                <el-tag v-else type="warning">{{ scope.row.type }}</el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column label="备注" align="center" prop="remark" v-if="columns[3].visible"
                            :show-overflow-tooltip="true" />
                        <el-table-column label="创建时间" align="center" prop="createTime" v-if="columns[4].visible">
                            <template slot-scope="scope">
                                <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d} {h}:{i}') }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" fixed="right" width="320" align="center"
                            class-name="small-padding fixed-width">
                            <template slot-scope="scope">
                                <el-tooltip content="设计流程" placement="top">
                                    <el-button link type="primary" icon="Promotion"
                                        @click="handleLFDesign(scope.row)"></el-button>
                                </el-tooltip>
                                <el-tooltip content="流程版本" placement="top">
                                    <el-button link type="warning" icon="Operation"
                                        @click="handleVersion(scope.row)"></el-button>
                                </el-tooltip>
                                <el-tooltip content="查看表单" placement="top">
                                    <el-button link type="success" icon="View"
                                        @click="handleLFTemp(scope.row)"></el-button>
                                </el-tooltip>
                                <el-tooltip content="通知设置" placement="top">
                                    <!-- v-if="scope.row.processNotices?.findIndex(item => item.active) > -1 || scope.row.templateVos?.length > 0" -->
                                    <el-button
                                        v-if="(scope.row.processNotices&&scope.row.processNotices.findIndex(item => item.active) > -1)||scope.row.templateVos.length > 0"
                                        link type="danger" icon="BellFilled"
                                        @click="handleFlowMsg(scope.row)"></el-button>
                                    <el-button v-else link icon="BellFilled" type="info"
                                        @click="handleFlowMsg(scope.row)"></el-button>
                                </el-tooltip>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </el-tab-pane>
            <el-tab-pane label="流程分类(DIY)" name="DIYTab">
                <div class="query-box">
                    <el-row :gutter="10" class="mb8">
                        <el-col :span="1.5">
                            <el-button type="primary" plain icon="CirclePlus" @click="handleDIYTemp">新增(DIY)</el-button>
                        </el-col>
                        <right-toolbar :showSearch="showSearch" @queryTable="getDIYList"
                            :columns="columns"></right-toolbar>
                    </el-row>
                </div>
                <div class="table-box">
                    <el-table v-loading="loading" :data="DIYList" height="50vh">
                        <el-table-column label="类型标识" align="center" prop="key" v-if="columns[0].visible"
                            :show-overflow-tooltip="true" />
                        <el-table-column label="类型名称" align="center" prop="value" v-if="columns[1].visible"
                            :show-overflow-tooltip="true" />
                        <el-table-column label="流程分类" align="center" prop="type" v-if="columns[2].visible"
                            :show-overflow-tooltip="true">
                            <template #default="item">
                                <el-tag v-if="item.row.type === 'LF'" type="success">{{ item.row.type }}</el-tag>
                                <el-tag v-else type="warning">{{ item.row.type }}</el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column label="备注" align="center" prop="remark" v-if="columns[3].visible"
                            :show-overflow-tooltip="true" />
                        <el-table-column label="创建时间" align="center" prop="createTime" v-if="columns[4].visible">
                            <template #default="scope">
                                <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d} {h}:{i}') }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" fixed="right" width="320" align="center"
                            class-name="small-padding fixed-width">
                            <template #default="scope">
                                <el-tooltip content="设计流程" placement="top">
                                    <el-button link type="primary" icon="Promotion"
                                        @click="handleDIYDesign(scope.row)"></el-button>
                                </el-tooltip>
                                <el-tooltip content="流程版本" placement="top">
                                    <el-button link type="warning" icon="Operation"
                                        @click="handleVersion(scope.row)"></el-button>
                                </el-tooltip>
                                <el-tooltip content="查看表单" placement="top">
                                    <el-button link type="success" icon="View"
                                        @click="handleLFTemp(scope.row)"></el-button>
                                </el-tooltip>
                                <el-tooltip content="通知设置" placement="top">
                                    <el-button
                                        v-if="(scope.row.processNotices&&scope.row.processNotices.findIndex(item => item.active) > -1) || scope.row.templateVos.length > 0"
                                        link type="danger" icon="BellFilled"
                                        @click="handleFlowMsg(scope.row)"></el-button>
                                    <el-button v-else link icon="BellFilled" type="info"
                                        @click="handleFlowMsg(scope.row)"></el-button>
                                </el-tooltip>

                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </el-tab-pane>
        </el-tabs>
        <!-- 添加类型标识 -->
        <el-dialog :title="title" v-model="openForm" append-to-body>
            <el-form :model="form" :rules="rules" ref="formRef" label-width="130px" style="margin: 0 20px;">

                <el-row>
                    <el-col :span="24">
                        <el-form-item label="类型标识" prop="key">
                            <el-input v-model="form.key" placeholder="请输入类型唯一标识" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="类型名称" prop="value">
                            <el-input v-model="form.value" placeholder="请输入类型名称" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="备注">
                            <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <template slot="footer">
                <div class="dialog-footer">
                    <el-button @click="closeDialog">关 闭</el-button>
                    <el-button type="primary" @click="submitForm">确 定</el-button>
                </div>
            </template>
        </el-dialog>

        <set-msg-drawer :visible="openFlowMsgDialog" :formMsgData="formMsgData" @refresh="refreshList" />
        <view-form-drawer :visible="open" :viewFormData="viewFormData" />

    </div>
</template>
<script>
import SetMsgDrawer from './setMsgDrawer.vue';
import ViewFormDrawer from './viewFormDrawer.vue';
import { getDIYFromCodeData } from "@/api/workflowNew/index";
import { createLFFormCode, getLFFormCodePageList } from '@/api/workflowNew/lowcodeApi';
export default {
  components: {
    SetMsgDrawer,
    ViewFormDrawer
  },
  data () {
    return {
        DIYList:[],
        LFPageList:[],
        loading:false,
        showSearch:true,
        open:false,
        openForm:false,
        openFlowMsgDialog:false,
        formMsgData:null,
        title:'',
        viewFormData:null,
        activeName:'LFTab',
        total:0,
        form:[],
        pageDto: {
            page: 1,
            pageSize: 10
        },
        taskMgmtVO: {
            description: undefined
        },
        rules: {
            key: [{
                required: true,
                pattern: /^[A-Z]{4,10}$/,
                message: '请输入类型唯一标识(只能是大写字母,4-10位长度)',
                trigger: ['blur', 'change']
            }],
            value: [{
                required: true,
                pattern: /^[\u4e00-\u9fa5]{4,10}$/,
                message: '请输入类型名称(必须包含汉字,4-10位长度)',
                trigger: ['blur', 'change']
            }],
        },
        columns:[
            { key: 0, label: `类型标识`, visible: true },
            { key: 1, label: `类型名称`, visible: true },
            { key: 2, label: `流程分类`, visible: true },
            { key: 3, label: `备注`, visible: true },
            { key: 4, label: `创建时间`, visible: true }
        ],


    }
  },
  mounted(){
    this.getLFPageList();
  },
  methods: {
    /** 查询接入业务方列表 */
    getDIYList() {
        this.loading = true;
        getDIYFromCodeData().then(response => {
            this.DIYList= response.data;
            this.loading = false;
        }).catch((err) => {
            this.loading= false;
            this.$modal.msgError("加载列表失败:" + err.message);
            
        });
    },
    /** 查询接入业务方列表 */
    getLFPageList() {
        this.loading = true;
        getLFFormCodePageList(this.pageDto, this.taskMgmtVO).then(response => {
            this.LFPageList = response.data;
            this.total= response.pagination.totalCount;
            this.loading = false;
        }).catch((err) => {
            this.loading = false;
           this.$modal.msgError("加载列表失败:" + err.message);
        });
    },
    /** 添加自定义业务表单FromCode */
    handleDIYTemp() {
        this.$modal.msgSuccess("后端添加流程适配以后自动查询出来");
    },
    /** 添加低代码业务表单FromCode */
    createLFTemp() {
        reset();
        this.title = "添加类型";
        this.openForm = true;

    },
    /** 提交表单 */
    submitForm() {
        this.$refs["formRef"].validate(valid => {
            if (valid) {
                createLFFormCode(this.form).then(response => {
                    if (response.code != 200) {
                        this.$modal.msgError("新增失败");
                        return;
                    }
                    this.$modal.msgSuccess("新增成功");
                    this.openForm = false;
                    this.getLFPageList();
                });
            }
        });
    },
    /** 查看表单操作 */
    handleLFTemp(row){
        this.viewFormData = row;
        this.open= true;
    },

    async handleDIYDesign(row) {
        this.$modal.loading();
        const param = {
            fcname: encodeURIComponent(row.value),
            fc: row.key
        };
        this.$modal.closeLoading();
        const obj = { path: "/workflow/diy-design", query: param };
        this.$tab.openPage(obj);
    },

    async handleLFDesign(row) {
        this.$modal.loading();
        const param = {
            fcname: encodeURIComponent(row.value),
            fc: row.key
        };
        this.$modal.closeLoading();
        const obj = { path: "/workflow/lf-design", query: param };
        this.$tab.openPage(obj);
    },
    /** 选择通知消息设置 */
    async handleFlowMsg(row) {
        this.formMsgData = {
            formCode: row.key,
            flowType: row.type,
            processNotices: row.processNotices || [],
            templateVos: row.templateVos || []
        };
        this.openFlowMsgDialog = true;
    },
    /** 刷新列表 */
    refreshList(type){
        if (type === 'LF') {
            this.getLFPageList();
        } else {
            this.getDIYList();
        }
    },
    /**
     * 跳转到版本管理
     * @param row 
     */
    handleVersion(row){
        const params = {
            formCode: row.key
        };
        let obj = { path: "flow-version", query: params };
        this.$tab.openPage(obj);
    },

    /** 搜索按钮操作 */
    handleQuery() {
        this.pageDto.page = 1;
        this.getLFPageList();
    },

    /** 重置按钮操作 */
    resetQuery() {
        this.pageDto.page = 1;
        this.resetForm("queryRef");
        this.handleQuery();
    },
    closeDialog() {
        this.open = false;
        this.openForm = false;
    },
    /** 重置操作表单 */
    reset() {
        this.form = {
            key: undefined,
            value: undefined,
            remark: undefined
        };
        this.resetForm("formRef");
    },

    handleClickTab(tab, event) {
        this.activeName= tab.paneName;
        if (tab.paneName == 'DIYTab') {
            this.getDIYList();
        } else {
            this.getLFPageList();
        }
    }
  }
}
</script>
<style lang="scss" scoped>
.component {
    background: white !important;
    padding: 30px !important;
    max-width: 720px !important;
    left: 0 !important;
    right: 0 !important;
    margin: auto !important;
}
</style>